<template>
	<view :data-theme="theme" class="container">
		<view class="header">
			<view class="bg_color" style="padding: 24rpx 24rpx;">
				<u-search v-model="orderNo" @custom="searchProduct" @search="searchProduct" placeholder="请输入商品订单号"
					actionText="搜索" :actionStyle="{color:'#FFF'}" shape="square" style="flex: none;"></u-search>
			</view>
			<view style="background-color: #fff;">
				<tab-bar style="background-color: #FFF;" :tabList="tabList" :tabIndex.sync="tabCurrentIndex"></tab-bar>
			</view>
			<!-- 日期筛选 -->
			<view style="background-color: #fff;padding-left: 20rpx;">
				<view style="display: flex; flex-flow: row;height: 40px;line-height: 40px;">
					<picker model="selector" @change="bindPickerChange" range-key="depotName" :value="depotDataIndex"
						:range="depotList" @cancel="cancelPicker" style="display: flex;justify-content: center;flex: 1;">
						<view style="display: flex;justify-content: center;flex: 1;"
							:style="{color:depotTypeShow?bgColor:null}" @click="depotTypeShow = true">
							<view style="font-size: 14px;margin-right: 6rpx;">仓库名称</view>
							<u-icon :name="depotTypeShow?'arrow-up-fill':'arrow-down-fill'" size="12"
								:color="depotTypeShow?bgColor:''"></u-icon>
						</view>
					</picker>
					<uni-datetime-picker v-model="range" type="daterange" @change="changeLog" :color="bgColor"
						@close="calendarShow = false">
						<view style="display: flex;justify-content: center;flex: 1;"
							:style="{color:calendarShow?bgColor:null}" @click="calendarShow = true">
							<view style="font-size: 14px;margin-right: 6rpx;">申请日期</view>
							<u-icon :name="calendarShow?'arrow-up-fill':'arrow-down-fill'" size="12"
								:color="calendarShow?bgColor:''"></u-icon>
						</view>
					</uni-datetime-picker>
				</view>
			</view>
		</view>

		<swiper class="tab-view" :duration="300" :current.sync="tabCurrentIndex">
			<swiper-item class="swiper-item" v-for="(tab, index) in tabList" :key="index" style="display: flex;">
				<scroll-view class="scroll-view" @scrolltolower="scrolltolowerFn" scroll-y
					style="height: 100%; overflow: hidden;">
					<!-- 封装组件 -->
					<swiper-page-cancell ref="tab" :tab="tab" :depotData="depotData" :bgColor="bgColor"
						@toDetails="toDetails"></swiper-page-cancell>
				</scroll-view>
			</swiper-item>
		</swiper>


		<view class="footer">
			<view style="margin:0 20rpx 20rpx 20rpx;">
				<!-- <u-button type="primary" :color="bgColor" :plain="true" text="+ 新建退库单"
					@click="goAddCancelling()"></u-button> -->
				<button :color="bgColor" class="bg_color"
					style="font-weight: bold;border-radius: 10px;color: #FFF;padding: 20rpx;"
					@click="goAddCancelling()">+
					新建退库单</button>
			</view>
		</view>
	</view>
</template>

<script>
	// import tabBar from '@/components/tab-bar/tab-bar.vue';
	import tabBar from '../components/tab-bar/tab-bar.vue';
	import swiperPageCancell from '../components/nvue-swiper-page-cancell.vue';
	import {
		businessQueryGoodsAndDepotApi,
		queryDepotInformationApi
	} from '@/api/goodsAndDepot.js';
	import {
		setThemeColor
	} from '../../../utils/setTheme';
	let app = getApp();
	export default {
		components: {
			swiperPageCancell,
			tabBar
		},
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				orderNo: '', //关键字查询
				calendarShow: false, //时间日期选择框
				calendar: {
					minDate: '',
					maxDate: '',
					defaultDate: [],
					monthNum: 13,
				}, //日期查询
				//---
				depotList: [],
				depotDataIndex: 0,
				depotTypeShow: false, //选择仓库下拉框
				invoiceTypeIndex: [0], //默认选择
				depotForm: {
					limit: 10,
					page: 1,
				}, // 查询仓库名称
				depotData: [], //仓库数据

				tabList: [],
				tabCurrentIndex: 0,
				//----------
				range: [],
			};
		},
		onLoad() {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			this.getDepotList();
			this.tabList = [{
					id: "tab11",
					state: 0,
					name: '全部',
					type: '', //必带类型
					orderList: []
				},
				{
					id: "tab12",
					state: 1,
					name: '待出库',
					type: 1,
					orderList: []
				},
				{
					id: "tab13",
					state: 2,
					name: '已取出',
					type: 2,
					orderList: []
				},
				{
					id: "tab14",
					state: 3,
					name: '已取消',
					type: 3,
					orderList: []
				}
			];
			this.chooseTimed();
		},
		onShow() {
			//初始化页面
			if (this.$refs.tab) {
				for (let item of this.$refs.tab) {
					item.getCancelList();
				}
			}
		},
		methods: {
			//tabs 标签切换事件
			tabClick(item) {
				this.tabCurrentIndex = item.index;
			},
			scrolltolowerFn() {
				this.$refs.tab[this.tabCurrentIndex].scrolltolowerFn();
			},
			searchProduct(value) {
				this.$refs.tab[this.tabCurrentIndex].searchProduct(value)
			},
			toDetails(item) {
				this.goPage('/pages/cancellingStock/cancellDetail/cancellDetail?data=' + JSON.stringify(item));
			},
			goAddCancelling() {
				this.goPage('/pages/cancellingStock/addCancelling/addCancelling');
			},
			goPage(url) {
				uni.navigateTo({
					url
				})
			},
			// 获取仓库 id
			getDepotList() {
				queryDepotInformationApi(this.depotForm).then((res) => {
					let depot = res.data.list
					let depotData = depot.map(obj => {
						const {
							createMemberName,
							depotAddress,
							depotTelephone,
							updatedMemberName,
							zoneId,
							...rest
						} = obj; //删除部分属性
						return rest
					}); //要删除的数据的数组
					let addDepotData = [{
						depotId: '',
						depotName: '全部'
					}];
					depotData.unshift(...addDepotData);
					this.depotData.push(depotData);
					this.depotList = depotData;
				})
			},

			// 仓库名称选择
			// invoiceTypeConfirm(item) {
			// 	let list = item.value[0].depotId;
			// 	this.depotTypeShow = false;
			// 	this.$refs.tab[this.tabCurrentIndex].invoiceTypeConfirm(list);
			// },
			bindPickerChange(e) {
				let i = e.detail.value;
				let list = this.depotList[i].depotId;
				this.depotTypeShow = false;
				this.$refs.tab[this.tabCurrentIndex].invoiceTypeConfirm(list);

			},

			cancelPicker() {
				this.depotTypeShow = false;
			},

			// 日期时间确认
			changeLog(dates) {
				// console.log('changeLog事件:', dates);
				let list = dates;
				let dateLimitArray = [];
				dateLimitArray.push(list[0], list[list.length - 1])
				let dateLimit = dateLimitArray.join(",")
			},
			//日期选择确认
			// calendarConfirm(dates) {
			// 	let list = dates;
			// 	let dateLimitArray = [];
			// 	dateLimitArray.push(list[0], list[list.length - 1])
			// 	let dateLimit = dateLimitArray.join(",")
			// },

			// 设置默认日期，最大值为今天，最小值为去年今天
			chooseTimed() {
				let date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (month <= 9) {
					month = '0' + month;
				}
				if (day <= 9) {
					day = '0' + day;
				}
				let minyear = year - 1;
				this.calendar.minDate = minyear + '-' + month + '-' + day;
				this.calendar.maxDate = year + '-' + month + '-' + day;
				this.calendar.defaultDate = year + '-' + month + '-' + day;
			},
		}
	}
</script>

<style lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}

	.plain_bgColor {
		@include main_color(theme);
		@include main_bg_rgba_color(theme, 0.05);
		border: 1rpx solid;
	}


	::v-deep .u-popup {
		flex: 0 !important;
	}

	page {
		height: 100%;
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.header {
		// height: 100px;
		background-color: #fff;
	}

	.tab-view {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	// .content {
	// 	flex: 1;
	// 	overflow: hidden;
	// }

	.scroll-view {
		height: 100%;
	}

	// .scroll-view-inner {
	// 	height: 200%;
	// 	/* 根据实际情况设置高度 */
	// 	background-color: #fff;
	// 	/* 内容区域背景色 */
	// }
</style>